<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./layui/css/layui.css" />
    <script src="./layui/layui.js"></script>
    <script src="./js/jquery-3.6.1.min.js"></script>
    <title>三合一_收款码小助手</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #fafafa;
      }

      .menu {
        height: 55px;
      }

      .content,
      .card,
      .button {
        padding-top: 10px;
      }

      .button {
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div class="layui-bg-gray" id="app">
      <div class="menu layui-layout layui-layout-admin">
        <div class="layui-header">
          <ul style="left: 0" class="layui-nav layui-layout-left">
            <li class="layui-nav-item">收款码助手</li>
          </ul>
          <!-- 头部区域（可配合layui 已有的水平导航） -->
          <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="https://gitee.com/lengxiaoyu66/collection-code-three-in-one.git" target="_blank">Gitee</a></li>
            <li class="layui-nav-item"><a href="https://www.789dl.cn/" target="_blank">Blog</a></li>
          </ul>
        </div>
      </div>
      <div class="layui-bg-gray content layui-form" action>
        <div class="layui-bg-gray card">
          <div style="margin: 10px" class="layui-row layui-col-space15">
            <!-- 商户名 -->
            <div class="layui-col-md6">
              <div class="layui-card">
                <div class="layui-card-header">商户信息</div>
                <div class="layui-card-body layui-row layui-col-space20">
                  <div class="layui-col-md12">
                    <input type="text" name="Name" id="Name" required lay-verify="required" placeholder="请输入商户名称" autocomplete="off" class="layui-input" />
                  </div>
                  <div class="layui-col-md12">&nbsp;</div>
                </div>
              </div>
            </div>
            <!-- QQ收款码 -->
            <div class="layui-col-md6">
              <div class="layui-card">
                <div class="layui-card-header">QQ收款码配置</div>
                <div class="layui-card-body layui-row layui-col-space10">
                  <div class="layui-col-md12"><input type="text" name="qqpay" id="qqpay" required lay-verify="required" placeholder="请输入QQ收款码链接" autocomplete="off" class="layui-input" /></div>
                  <div class="layui-col-md12">
                    <button type="button" class="layui-btn layui-btn-fluid decode">上传收款码识别</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- 微信赞赏码 -->
            <div class="layui-col-md6">
              <div class="layui-card">
                <div class="layui-card-header">微信赞赏码配置-请勿带赞赏语会导致图片截取错误</div>
                <div class="layui-card-body layui-row layui-col-space10">
                  <div class="layui-col-md12">
                    <input type="text" name="wxpay" id="wxpay" required lay-verify="required" placeholder="请输入商户名称" autocomplete="off" class="layui-input" />
                  </div>
                  <div class="layui-col-md12">
                    <button type="button" class="layui-btn layui-btn-fluid crop-image">上传赞赏码识别</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- 支付宝 -->
            <div class="layui-col-md6">
              <div class="layui-card">
                <div class="layui-card-header">支付宝收款码配置</div>
                <div class="layui-card-body layui-row layui-col-space10">
                  <div class="layui-col-md12">
                    <input type="text" name="alipay" id="alipay" required lay-verify="required" placeholder="请输入商户名称" autocomplete="off" class="layui-input" />
                  </div>
                  <div class="layui-col-md12">
                    <button type="button" class="layui-btn layui-btn-fluid decode">上传收款码识别</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="button"><button type="button" class="layui-btn" lay-submit lay-filter="formDemo">生成收款码</button></div>
      </div>
    </div>
    <script>
      layui.use('element', function () {
        var element = layui.element
      })
      let layer = layui.layer
      layer.open({
        type: 1,
        title: '温馨提示',
        content: `<div style="margin:10px;  width: 300px;">由于之前的不稳定，目前已重写解码接口，请以前的用户重新生成收款码！</div>`,
        btn: ['好的'],
        yes: function (index, layero) {
          layer.close(index)
        }
      })
      let upload = layui.upload
      // 解码
      upload.render({
        elem: '.decode',
        url: 'https://upload.api.cli.im/upload.php?kid=cliim',
        accept: 'images',
        acceptMime: 'image/*',
        field: 'Filedata',
        done: function (res, index, upload) {
          const data = res.data
          if (res.status == 1) {
            $.ajax({
              url: '/decode',
              method: 'post',
              data: {
                image_path: data.path
              },
              beforeSend: function () {
                this.index = layer.msg('解码中', {
                  icon: 16,
                  shade: 0.01
                })
              },
              success: (data) => {
                layer.closeAll()
                if (data.code !== 200) {
                  return layer.msg('出错了，请联系管理员！')
                }
                layer.msg(data.msg)
                let url = data.data
                if (url.indexOf('qianbao.qq.com') !== -1) {
                  return $('#qqpay').val(url)
                } else if (url.indexOf('qr.alipay.com') !== -1) {
                  return $('#alipay').val(url)
                }
                return layer.msg('请上传正确的QQ或者支付宝收款码！')
              }
            })
          }
        }
      })
      //  微信赞赏码裁剪
      upload.render({
        elem: '.crop-image',
        url: '/crop-image',
        accept: 'images',
        acceptMime: 'image/*',
        done: function (res, index, upload) {
          if (res.code !== 200) {
            return layer.msg(res.msg)
          }
          console.log(res.url)
          return $('#wxpay').val(res.url)
        }
      })
      layui.use('form', function () {
        var form = layui.form
        //生成
        form.on('submit(formDemo)', function (data) {
          $.ajax({
            url: '/create',
            method: 'post',
            data: data.field,
            beforeSend: function () {
              this.index = layer.msg('生成中', {
                icon: 16,
                shade: 0.01
              })
            },
            success: (res) => {
              layer.closeAll()
              layer.open({
                type: 1,
                title: '长安或右键保存图片',
                content: `<div style="width: 300px;height: 414px;"><img style="width: 100%;height: 100%;" src="${res.data}" alt="" /></div>`,
                btn: ['好的'],
                yes: function (index, layero) {
                  layer.close(index)
                }
              })
            }
          })
          return false
        })
      })
    </script>
  </body>
</html>
